/**
 *@author：yc
 *@pramas: 
  * "configform"，Object,绑定的表单数据，键值对
  * "columnInfo",Object,表单数据对应的属性列
  * "uploadImgAttr",Object,上传图片的数据属性值
 * 备注：
 */
<template>
	<el-form-item :label="column.columnLabel" v-if="column.isModifyDialogEnabled">
		<el-col :span="12">
			<!--<el-input style="width:100%" v-model="configform[columnKey]"
				:clearable="true" :readonly="isShowUploadPic(columnKey)"></el-input>-->
			<el-select v-if="column.isInputSelectList" v-model="configform[column.columnName]" filterable placeholder="请选择">
				<!--<el-option label="区域一" value="shanghai"></el-option>
				<el-option label="区域二" value="beijing"></el-option>-->
				<el-option v-for="item in column.selectListData" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>
			<el-select v-else-if="column.type==='select'" v-model="configform[column.columnName]" filterable placeholder="请选择">
				<el-option v-for="item in column.selectListData" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>
			<el-cascader v-else-if="column.isInputCascaderSelectList" expand-trigger="hover" 
				v-model="configform[column.columnName]" :options="column.selectListData" :props="categorySelectProps" @change="cascaderSelectHandleChange">
			</el-cascader>
			<div v-else-if="column.isMulSelectBox">
				<!-- <el-checkbox :indeterminate="mulCheckBox.isIndeterminate" v-model="mulCheckBox.checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
				<el-checkbox-group v-model="mulCheckBox.checkedItems" :min="1" :max="1" @change="handleCheckedItemChange">
					<el-checkbox v-for="item in column.selectListData" :label="item.name" :key="item.id">{{item.name}}</el-checkbox>
				</el-checkbox-group>
			</div>
			<el-date-picker v-else-if="column.dataType != undefined && column.dataType==='date'" v-model="datePickerData[column.columnName]" align="right" type="date" placeholder="选择日期" 
				value-format="timestamp" :picker-options="datePickerOptions" @change="(dateVal)=>{return formatDate(dateVal,column.columnName)}">
			</el-date-picker>
			<el-input v-else style="width:100%" v-model="configform[column.columnName]"
				:clearable="true" :readonly="column.isPicColumn"></el-input>
		</el-col>
		<el-col :span="12">
		    <!-- <el-upload
		    	class="avatar-uploader"
				list-type="picture-card"
			    :action="urlPaths.importFileUrl"
			    accept="image/jpeg,image/gif,image/png"
			    :data="uploadDatas"
				:ref="uploads"
			    :before-upload="(file)=>{return beforeAvatarUpload(file,columnKey)}"
			    :on-success="(res,file,fileList)=>{return handleAvatarSuccess(res,file,fileList,columnKey)}"
			    :onError="handleAvatarError"
			    :on-remove="(file,fileList)=>{return handleRemove(file,fileList,columnKey)}">
			    <i class="el-icon-plus"></i>
			</el-upload> -->
			<m-upload-img v-if="column.isPicColumn" :imgsAttrName="uploadImgAttr" :itemAttr="column.columnName" :isMultImgs="column.isMulUploadPic" 
				ref="uploadChild" @response-handler="afterUploadHandler"/>
			<el-button v-else-if="column.isNewDialogLinkEnabled" type="text" @click="addLinkBtn">找不到，新建一个标签</el-button>
		</el-col>
	</el-form-item>
</template>

<script>
	import Message from 'element-ui';
	export default {
		name:'m-dialog-form-item',
		props: {
			configform: { // 绑定的表单数据，键值对
			    type: Object,
				default () {          
					return  {}        
				} 
			},
			columnInfo:{  // 表单数据对应的属性列
				type: Object,
				default () {          
					return  {}        
				} 
			},
			uploadImgAttr: { // 上传图片的数据属性值
			    type: Object,
			    required: false, //不是上传图片组件可以不传值
				default () {          
					return  {}        
				} 
			},
	  },
	data () {
		return {
			searchDatas:[],
			categorySelectProps:{
				label: 'categoryName', 
				value: 'categoryId', 
				children: 'subCategorylist'
			},
			mulCheckBox:{
				isIndeterminate:true,
				checkAll:false,
				checkedItems:[],
				allItemList:[]
			},
			datePickerOptions: {
				disabledDate(time) {
					// return time.getTime() > Date.now();
					return false;
				},
				shortcuts: [{
					text: '今天',
					onClick(picker) {
					  picker.$emit('pick', new Date());
					}
				}, 
				{
					text: '一周后',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', date);
					}
				}]
			},
			datePickerData:[]
		}
	},
	computed:{
		column(){
			return this.columnInfo;
		},
//		/**
//		 * @author：01367604
//		 * @function: 转换新增和修改model框中显示的属性名称，将英文列名转换成中文描述
//		 * @pramas: 
//		 */
//		transAttrName(value){
//			return function (value){
////					#console.log(value);
//				var resLabel;
//				var colElem = this.tableColumn.find((element) => (element.columnName == value))
//				if (colElem.columnLabel != undefined && colElem.columnLabel.length>0){
//					resLabel= colElem.columnLabel;
//				} else {
//					resLabel= colElem.columnName;
//				}
//				return resLabel;
//			}
//		},

	},
	mounted() {
		this.queryDatas();
	},
	watch:{
// 		searchDatas:function(newVal,oldVal){
// 			
// 		}
	},
	methods: {
		queryDatas(){
			// 查询辅助数据
			if (this.column.isInputSelectList || this.column.isInputCascaderSelectList 
				|| this.column.isMulSelectBox || this.column.type=='select'){
				this.querySelectList(this.column.dataQueryUrl, this.column);
			}
//			else if (col.isInputCascaderSelectList!=undefined && col.isInputCascaderSelectList==true){
//				this.querySelectList(this.column.dataQueryUrl, col);
//			}
		},
		/*查询相关下拉列表数据接口*/
		querySelectList(url, column){
			this.$httpExt().get(url).then((response) => {
				var rows= response.rows;
				console.log('selectList size:' + rows.length);
				column.selectListData = rows;
			},(response) => {
				Message({
					message: '服务器请求失败，请重试！',
					type: 'warning'
				});
			});
		},
		cascaderSelectHandleChange(value){
			console.log(value);
		},
		afterUploadHandler(data){
			console.log(data);
			this.configform[data.columnName] = data.res;
		},
		addLinkBtn(){
			//触发response-handler方法，向父组件传递服务返回的数据
			this.$emit('linkBtn-handler', '');
		},
		/*多选框处理全选*/
		handleCheckAllChange(val){
			this.mulCheckBox.checkedItems = val ? this.mulCheckBox.allItemList : [];
			this.mulCheckBox.isIndeterminate = false;
		},
		handleCheckedItemChange(value) {
// 			let checkedCount = value.length;
// 			let allCount = this.mulCheckBox.allItemList.length;
// 			this.mulCheckBox.checkAll = checkedCount === allCount;
// 			this.mulCheckBox.isIndeterminate = checkedCount > 0 && checkedCount < allCount;
		},
		formatDate(val, columnName){
// 			console.log(val);
			console.log(this.datePickerData[columnName]);
			this.configform[columnName]= this.datePickerData[columnName].getTime();
			// console.log(this.configform[columnName]);
// 			var currentDate = attrItem.getTime();
// 			attrItem = currentDate;
// 			console.log(attrItem);
// 			console.log(attrItem.getTime());
// 			console.log(new Date(attrItem.getTime()));
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
// .linecharts{
//     width: 100%;
// }
</style>
